import React, { Component } from 'react';

import { connect } from 'dva';
import { router, withRouter } from 'umi';

// import Sidebar from './common/components/sidebar';
import styles from './_layout.css';

import {
  Spin,
  Tabs,
  Tree,
  Menu,
  Icon,
} from 'antd';

const { TabPane } = Tabs;
const { TreeNode, DirectoryTree } = Tree;
const { SubMenu } = Menu;

/**
 * 首页布局
 */
class Index extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { homeMaskLoadingState, children } = this.props;

    return (
      <Spin spinning={homeMaskLoadingState} size="large" tip="加载中..." delay={5}>
        {/* 操作界面布局 */}
        <div className={styles.container} style={{ minHeight: '100vh', }}>
          {/* 左边菜单栏 */}
          <div style={{ position: 'fixed', left: 0, top: 0, bottom: 0, width: 270, padding: 5, }}>
            {/* 菜单操作区 */}
            <div className={styles.nav_submenu}>
              <Tabs onChange={this.tabsChangedHandler} type="card" style={{ width: '100%', height: '100%', }}>
                {/* 站点 */}
                <TabPane tab="站点" key="WEBSITE" >
                  <div className={styles.website} style={{ width: '100%', overflowX: 'hidden', overflowY: 'auto' }}>
                    <DirectoryTree 
                      multiple 
                      defaultExpandAll 
                      showIcon={true} 
                      checkable={true} 
                      onSelect={this.treeNodeSelectedHandler} 
                      onClick={this.treeNodeClickedHandler}
                      onExpand={this.onExpand}>
                      <TreeNode key="0-0-0" value='/home/labour-union' title="厦门市工会站点" onClick={this.nodeClickedHandler}>
                        <TreeNode key="0-0-0-0" value='/home/site' title="市总动态"></TreeNode>
                        <TreeNode key="0-0-0-1" value='/home/site' title="媒体报道"></TreeNode>
                        <TreeNode key="0-0-0-2" value='/home/site' title="产业动态"></TreeNode>
                      </TreeNode>
                      <TreeNode key="0-0-1" value='/home/labour-union' title="湖里区工会站点" onClick={this.nodeClickedHandler}>
                        <TreeNode key="0-0-1-0" value='/home/site' title="中心要闻"></TreeNode>
                        <TreeNode key="0-0-1-1" value='/home/site' title="职工事迹"></TreeNode>
                      </TreeNode>
                    </DirectoryTree>
                  </div>
                </TabPane>
                
                {/* 检索 */}
                <TabPane tab="检索" key="SEARCH" forceRender={true}>
                  <div style={{ width: '100%', overflowX: 'hidden', overflowY: 'auto' }}>
                    bbbb
                  </div>
                </TabPane>

                {/* 统计 */}
                <TabPane tab="统计" key="STATISTICS" forceRender={true}>
                  <div style={{ width: '100%', overflowX: 'hidden', overflowY: 'auto' }}>
                    <DirectoryTree 
                      multiple 
                      defaultExpandAll 
                      showIcon={true} 
                      onClick={this.treeNodeClickedHandler}>
                      <TreeNode key="0-0" title="按站点统计" icon={<Icon type="bar-chart" />}> 
                      </TreeNode>
                      <TreeNode key="0-1" title="按栏目统计" icon={<Icon type="bar-chart" />}> 
                      </TreeNode>
                      <TreeNode key="0-2" title="按文章统计" icon={<Icon type="bar-chart" />}> 
                      </TreeNode>
                      <TreeNode key="0-3" title="按用户统计" icon={<Icon type="bar-chart" />}> 
                      </TreeNode>
                      <TreeNode key="0-4" title="按组织统计" icon={<Icon type="bar-chart" />}> 
                      </TreeNode>
                    </DirectoryTree>
                  </div>
                </TabPane>

                {/* 系统 */}
                <TabPane tab="系统" key="SYSTEM" forceRender={true}>
                  <div className={styles.system} style={{ width: '100%', overflowX: 'hidden', overflowY: 'auto' }}>
                    <Menu
                      style={{ width: 256 }}
                      defaultSelectedKeys={['/home/system/authority']}
                      mode="inline"
                      theme="light"
                      onSelect={this.menuSelectedHandler}>
                      <Menu.Item key="/home/system/authority">
                        权限管理
                      </Menu.Item>
                      <Menu.Item key="/home/system/whiteList">
                        白名单管理
                      </Menu.Item>
                      <Menu.Item key="/home/system/ftp">
                        FTP管理
                      </Menu.Item>
                    </Menu>
                    {/* <DirectoryTree 
                      multiple 
                      defaultExpandAll 
                      showIcon={true} 
                      checkable={true} 
                      onSelect={this.treeNodeSelectedHandler} 
                      onClick={this.treeNodeClickedHandler}
                      onExpand={this.onExpand}>
                      <TreeNode key="0-1-0" value='/home/white-list-management' title="白名单管理"></TreeNode>
                      <TreeNode key="0-1-1" value='/home/power-management' title="权限管理"></TreeNode>
                      <TreeNode key="0-1-2" value='/home/FTP-management' title="FTP管理"></TreeNode>
                    </DirectoryTree> */}
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </div>
          
          {/* 右边内容栏 */}
          <div style={{ position: 'absolute', left: 275, top: 0, bottom: 0, right: 0 }}>
            { children }
          </div>
        </div>
      </Spin>
    )
  } 

  /**
   * 侧边栏标签页切换事件
   */
  tabsChangedHandler = (key) => {
    if(key === 'WEBSITE') {
      router.push({
        pathname: '/home/website', 
      });
    } 
    else if(key === 'SEARCH') {
      router.push({
        pathname: '/home/search',
      });
    } 
    else if(key === 'STATISTICS') {
      router.push({
        pathname: '/home/statistics/website',
      });
    } 
    // 跳转到系统设置
    else if(key === 'SYSTEM') {
      router.push({
        pathname: '/home/system/authority',
      });
    } 
  }

  /**
   * 菜单节点点击跳转路由事件
   */
  menuSelectedHandler = ({ item, key, keyPath, selectedKeys, domEvent }) => {
    router.push({
      pathname: key
    });
  }
}

/**
 * 需要全局loading的effects
 */
const NEED_GLOBAL_LOADING_EFFECTS = [
  // 'pages_home_system_white_list/'
];

const mapStateToProps = (state) => {
  let homeMaskLoadingState = false;
  
  /**
   * 给effects添加loading
   */
  for(let i = 0; i < NEED_GLOBAL_LOADING_EFFECTS.length; i ++) {
    if(!state.loading.effects[NEED_GLOBAL_LOADING_EFFECTS[i]]) continue;
    homeMaskLoadingState = state.loading.effects[NEED_GLOBAL_LOADING_EFFECTS[i]];
    break;
  }

  return {
    homeMaskLoadingState,
  };
}

export default withRouter(connect(mapStateToProps)(Index));
